<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
</head>

<body class="index">
    <main class="main">
        <!-- 轮播图 -->
        <div class="swiper">
            <div class="swiper-wrapper">
                <div class="swiper-slide slide1"></div>
                <div class="swiper-slide slide2"></div>
                <div class="swiper-slide slide3"></div>
            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>
        </div>

        <!-- 排名+打卡 -->
        <section class="main1 fw-bold">
            <div class="rank">
                今日排名
                <span id="rankNum">9</span>
            </div>
            <div class="clockin">
                累计打卡<span id="clockinNum">23</span>天
                <button type="button" id="clockinBtn">今日打卡</button>
            </div>
        </section>

        <!-- 运动数据+徽章 -->
        <section class="main2">
            <div class="sport">
                运动数据
            </div>
            <div class="badge fw-bold">
                累计运动徽章
                <span><strong id="badgeNum">3</strong>枚</span>
            </div>
        </section>
        <!-- 课程训练 -->
        <section class="main3">
            课程训练
        </section>
        <!-- 户外跑步 -->
        <section class="main4">
            户外跑步
        </section>
    </main>
    <!-- 底部导航tabbar -->
    <nav class="tabbar">
    </nav>
</body>

</html>